Store এবং Component Caching হল ExtJS-এর দুটি গুরুত্বপূর্ণ ফিচার, যা অ্যাপ্লিকেশন পারফরম্যান্স এবং ডেটা ম্যানেজমেন্টে সাহায্য করে। Store ডেটা পরিচালনা করে এবং Component Caching ইউজার ইন্টারফেস উপাদানগুলিকে ক্যাশে করে যাতে পুনরায় ব্যবহারযোগ্য হয়। এই দুটি ফিচারকে সঠিকভাবে ব্যবহার করলে অ্যাপ্লিকেশন আরও দ্রুত এবং স্কেলেবল হয়।
১. Store in ExtJS
Store হল একটি ডেটা ম্যানেজমেন্ট কম্পোনেন্ট যা ExtJS অ্যাপ্লিকেশনগুলিতে ডেটার স্টোরেজ এবং ম্যানিপুলেশন পরিচালনা করে। একটি Store সাধারণত ডেটা লোড করা, ফিল্টার করা, সোর্ট করা এবং রেকর্ডের সাথে কাজ করার জন্য ব্যবহৃত হয়।
Store উদাহরণ:
Ext.create('Ext.data.Store', {
storeId: 'userStore',
fields: ['id', 'name', 'email'],
data: [
{ id: 1, name: 'John Doe', email: 'john@example.com' },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com' }
],
proxy: {
type: 'memory', // স্মৃতি ভিত্তিক স্টোর
reader: {
type: 'json',
rootProperty: 'data'
}
}
});
এখানে:
fields: স্টোরের মধ্যে ডেটার ফিল্ডগুলির নাম নির্ধারণ করা হয়েছে।data: স্টোরে ডেটা লোড করা হয়েছে। এটি সরাসরি ডাটা লোড করার জন্য ব্যবহৃত হয়।proxy: স্টোরের জন্য ডেটা রিডার এবং ডেটা টাইপ (যেমন: memory বা ajax) নির্ধারণ করা হয়েছে।
Store এর বিভিন্ন কার্যক্রম:
- Data Filtering:
var store = Ext.getStore('userStore');
store.filter('name', 'John'); // 'John' নামের সাথে মিলে এমন ডেটা ফিল্টার করা হবে
- Sorting:
store.sort('name', 'ASC'); // 'name' ফিল্ডে Ascending অর্ডারে সোর্ট করা হবে
- Loading Data (Ajax Request):
var store = Ext.create('Ext.data.Store', {
proxy: {
type: 'ajax',
url: 'data.json', // সার্ভার থেকে JSON ডেটা লোড হবে
reader: {
type: 'json',
rootProperty: 'data'
}
},
autoLoad: true
});
এখানে, proxy কনফিগারেশন দিয়ে সার্ভার থেকে ডেটা লোড করা হচ্ছে।
২. Component Caching in ExtJS
Component Caching হল ExtJS-এর একটি পদ্ধতি যা UI কম্পোনেন্টগুলির পুনঃরেন্ডারিং এবং অপ্রয়োজনীয় লোডিং কমিয়ে দেয়। যখন UI কম্পোনেন্টগুলি পুনরায় ব্যবহৃত হয়, তখন সেগুলিকে আবার লোড বা রেন্ডার করার পরিবর্তে ক্যাশে করা হয়।
Component Caching ব্যবহারের সুবিধা:
- পারফরম্যান্স বৃদ্ধি: UI কম্পোনেন্টগুলি পুনরায় লোড করার পরিবর্তে ক্যাশে করা হলে অ্যাপ্লিকেশন দ্রুত হয়।
- নমনীয়তা: ডাইনামিকভাবে UI কম্পোনেন্টগুলি যোগ বা মুছে ফেলা হলেও আগের কম্পোনেন্টগুলো ক্যাশে থেকে রেন্ডার হতে থাকে।
- রিসোর্স সাশ্রয়: অতিরিক্ত রেন্ডারিং বা লোডিং থেকে রিসোর্স সাশ্রয় করা যায়।
Component Caching উদাহরণ:
Ext.create('Ext.panel.Panel', {
title: 'My Panel',
width: 300,
height: 200,
renderTo: Ext.getBody(),
html: 'Hello, this is a cached panel!',
cacheable: true // ক্যাশে করার জন্য
});
এখানে, cacheable: true প্রপার্টি কম্পোনেন্টকে ক্যাশে করার জন্য সেট করা হয়েছে, যাতে পুনরায় ব্যবহার করলে এটি পুনরায় রেন্ডার না হয়ে ক্যাশ থেকে আসবে।
Ext.ComponentCache ব্যবহার:
ExtJS তে Ext.ComponentCache নামক একটি ক্লাস রয়েছে, যা ক্যাশে কম্পোনেন্ট পরিচালনা করে। এটি কম্পোনেন্টগুলিকে ক্যাশে করতে এবং পুনরায় ব্যবহারযোগ্য করতে সহায়তা করে।
Ext.create('Ext.ComponentCache', {
id: 'myCachedPanel',
component: {
xtype: 'panel',
title: 'My Cached Panel',
html: 'This panel is cached for reuse.'
}
});
// Reuse the cached component
var cachedPanel = Ext.ComponentCache.get('myCachedPanel');
cachedPanel.show();
এখানে:
Ext.ComponentCacheব্যবহার করে কম্পোনেন্টটি ক্যাশে করা হয়েছে এবং পুনরায় সেটি ব্যবহার করা হয়েছে।
৩. Cache Management
ক্যাশ ম্যানেজমেন্টের মাধ্যমে আপনি ক্যাশের মধ্যে সঠিক ডেটা সংরক্ষণ এবং পুরানো বা অপ্রয়োজনীয় ডেটা পরিষ্কার করতে পারবেন।
Cache Expiration:
কিছু ক্যাশ ডেটার জন্য সময়সীমা (TTL) নির্ধারণ করা যায়, যাতে ডেটার মেয়াদ শেষ হলে তা স্বয়ংক্রিয়ভাবে মুছে ফেলা হয়।
var store = Ext.create('Ext.data.Store', {
storeId: 'userStore',
fields: ['id', 'name', 'email'],
data: [
{ id: 1, name: 'John Doe', email: 'john@example.com' },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com' }
],
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'data'
},
ttl: 300000 // ক্যাশের মেয়াদ 5 মিনিট (300000 মিলিসেকেন্ড)
}
});
এখানে:
ttl(Time-to-live) প্রপার্টি দিয়ে স্টোরের ক্যাশের মেয়াদ নির্ধারণ করা হয়েছে, যাতে 5 মিনিট পর ক্যাশ মুছে যায়।
৪. Store এবং Component Caching এর সমন্বয়
একটি কার্যকরী অ্যাপ্লিকেশন তৈরির জন্য আপনি Store এবং Component Caching একত্রিতভাবে ব্যবহার করতে পারেন, যাতে ডেটা এবং UI দুটি সঠিকভাবে ক্যাশে করা যায় এবং অ্যাপ্লিকেশন পারফরম্যান্স বৃদ্ধি পায়।
Example: Store and Component Caching
// Store with memory proxy
var store = Ext.create('Ext.data.Store', {
storeId: 'userStore',
fields: ['id', 'name', 'email'],
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'data'
}
},
autoLoad: true
});
// Component with caching
Ext.create('Ext.panel.Panel', {
title: 'User Information',
renderTo: Ext.getBody(),
width: 400,
height: 200,
html: 'Loading user data...',
cacheable: true, // Component caching
listeners: {
afterrender: function() {
var panel = this;
store.load({
callback: function(records, operation, success) {
if (success) {
panel.update('<ul>' + records.map(function(record) {
return '<li>' + record.get('name') + ' - ' + record.get('email') + '</li>';
}).join('') + '</ul>');
}
}
});
}
}
});
এখানে:
store.load()ব্যবহার করে ডেটা লোড করা হচ্ছে এবং তারপর কম্পোনেন্টেরhtmlআপডেট করা হচ্ছে।cacheable: trueব্যবহার করে কম্পোনেন্টটি ক্যাশে করা হচ্ছে, যাতে পরবর্তী সময়ে দ্রুত রেন্ডার করা যায়।
সারাংশ
- Store: ExtJS এর Store কম্পোনেন্টটি ডেটা ম্যানেজমেন্টের জন্য ব্যবহৃত হয় এবং এটি ডেটা ফিল্টার, সোর্ট, লোড, এবং ম্যানিপুলেট করার জন্য ব্যবহৃত হয়।
- Component Caching: UI কম্পোনেন্টগুলি ক্যাশে করা হলে, এগুলিকে পুনরায় লোড বা রেন্ডার না করে দ্রুত পুনরায় ব্যবহৃত করা যায়, যা অ্যাপ্লিকেশন পারফরম্যান্স উন্নত করে।
- Cache Management: ক্যাশ ম্যানেজমেন্টের মাধ্যমে ডেটা সঠিকভাবে সংরক্ষণ এবং অপ্রয়োজনীয় ডেটা মুছে ফেলা যায়।
- Store and Component Caching Integration: ডেটা এবং UI কম্পোনেন্টের ক্যাশিং একত্রিত করে অ্যাপ্লিকেশনের স্কেলেবিলিটি এবং পারফরম্যান্স বৃদ্ধি করা যায়।
এটি একটি অত্যন্ত কার্যকরী কৌশল যা ডেটার ম্যানিপুলেশন এবং ইউজার ইন্টারফেস অপটিমাইজেশনে সহায়ক।
Read more
